<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<!-- 需求1：定义一个V-big指令 和V-text功能类似，但会把绑定的数值放大10倍 -->
<!-- 需求2：定义一个v-fbind指令 和V-bind功能类似，但可以让其绑顶的Input元素默认获取焦点 -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <!-- v-big是我自定义的属性 -->
        <!-- 命名 不要驼峰式 可以用- 比如v-big-number 对应的对象式里面用'big-number' -->
        <h2>放大10倍后的值<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>

    <div id="root2">
        <input type="text" v-fbind:value="x">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;  //阻止Vue在启动时生成 生产提示

        // 全局自定义属性——函数式
        Vue.directive('fbind',{
                  bind(element,binding){
                        element.value=binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element,binding){
                        element.value=binding.value
                    }
        })

        //  全局自定义属性——对象式
        //创建Vue实例
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷',
                n:1
            },
            directives:{
                // 这里用big 就可以了不用v-  其中element拿到的是span元素（真实dom),binding里面有很多东西，但我们主要拿里面的value
                //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
                big(element,binding){
                    // console.log('big');
                    // console.log(binding);
                    element.innerText=binding.value*10
                },
                // fbind(element,binding){
                //     element.value=binding.value
                // }
                // fbind:{
                //     // 指令与元素成功绑定时（一上来）
                //     bind(element,binding){
                //         element.value=binding.value
                //     },
                //     // 指令所在元素被插入页面时
                //     inserted(element,binding){
                //         element.focus()
                //     },
                //     // 指令所在的模板被重新解析时
                //     update(element,binding){
                //         element.value=binding.value
                //     }
                // }
            }
        })

        new Vue({
            el:'#root2',
            data:{
                x:1
            }
        })
    </script>
</body>

</html>